<template>
  <div>
    <!-- <h2 id="demo">水温：{{temp}}</h2>
    <h2>水位：{{height}}</h2>
    <button @click="changePrice">水温+1</button>
    <button @click="changeSum">水位+10</button> -->
    <!-- <h1 ref="title1">尚硅谷</h1>
    <button @click="showLog">点我打印内容</button> -->

      <HelloWorld :list="persons" />



  </div>
</template>

<script setup lang="ts">


  import { reactive, ref, watchEffect } from 'vue'

  import HelloWorld from '@/components/HelloWorld.vue';
  import { type Persons } from '@/interface/inter'


  let title1 = ref()
  let ren = ref()

  let persons = reactive<Persons>([
      {id: '3ddfdf', name: '张三', age: 20},
      {id: '3ddf3h', name: '李四', age: 24},
      {id: '3df3mn', name: '王五', age: 26},
  ])

  
  
  function showLog(){
    // console.log(title1.value);
    // console.log(ren)
    // console.log(ren.value.name);
    // console.log(ren.value.age);
  }


  // let temp = ref(0);
  // let height = ref(0)

  // const changePrice = () => {
  //   temp.value += 10
  // }

  // const changeSum = () => {
  //   height.value += 1
  // }

  // watchEffect(() => {
  //   if(temp.value >= 50 || height.value >= 20){
  //     console.log('联系管理员');
      
  //   }

  //   if(temp.value === 100 || height.value === 50){
  //     console.log('清理了');
  //   }
  // })

</script>